<template>
  <div class="training-exam">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训考核</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="examForm" :rules="rules" ref="examForm" label-width="120px">
        <el-card class="exam-section">
          <div slot="header">
            <span>考核基本信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="examForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核方式" prop="examType">
                <el-select v-model="examForm.examType" placeholder="请选择考核方式">
                  <el-option label="笔试" value="written"></el-option>
                  <el-option label="实操" value="practical"></el-option>
                  <el-option label="口试" value="oral"></el-option>
                  <el-option label="综合考核" value="comprehensive"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核时间" prop="examTime">
                <el-date-picker
                  v-model="examForm.examTime"
                  type="datetime"
                  placeholder="选择考核时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核地点" prop="examLocation">
                <el-input v-model="examForm.examLocation" placeholder="请输入考核地点"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核人员" prop="examinees">
                <el-select v-model="examForm.examinees" multiple placeholder="请选择考核人员">
                  <el-option
                    v-for="item in employees"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核评分人" prop="examiners">
                <el-select v-model="examForm.examiners" multiple placeholder="请选择考核评分人">
                  <el-option
                    v-for="item in examiners"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="exam-section">
          <div slot="header">
            <span>考核内容设置</span>
          </div>

          <el-form-item label="考核项目" prop="examItems">
            <div v-for="(item, index) in examForm.examItems" :key="index" class="exam-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="考核项目名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input-number v-model="item.score" :min="0" :max="100" placeholder="分值"></el-input-number>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.standard" placeholder="考核标准"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeExamItem(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addExamItem">添加考核项目</el-button>
          </el-form-item>

          <el-form-item label="及格标准" prop="passScore">
            <el-input-number v-model="examForm.passScore" :min="0" :max="100" placeholder="请设置及格分数"></el-input-number>
            <span class="score-unit">分</span>
          </el-form-item>

          <el-form-item label="考核说明" prop="examDescription">
            <el-input type="textarea" v-model="examForm.examDescription" :rows="4" placeholder="请输入考核说明"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button type="success" @click="submitAndNext">保存并进入下一步</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingExam',
  data() {
    return {
      examForm: {
        trainingProject: '',
        examType: '',
        examTime: '',
        examLocation: '',
        examinees: [],
        examiners: [],
        examItems: [
          {
            name: '',
            score: 100,
            standard: ''
          }
        ],
        passScore: 60,
        examDescription: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        examType: [{ required: true, message: '请选择考核方式', trigger: 'change' }],
        examTime: [{ required: true, message: '请选择考核时间', trigger: 'change' }],
        examLocation: [{ required: true, message: '请输入考核地点', trigger: 'blur' }],
        examinees: [{ required: true, message: '请选择考核人员', trigger: 'change' }],
        examiners: [{ required: true, message: '请选择考核评分人', trigger: 'change' }],
        passScore: [{ required: true, message: '请设置及格分数', trigger: 'blur' }]
      },
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ],
      employees: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' }
      ],
      examiners: [
        { value: '1', label: '赵主管' },
        { value: '2', label: '钱经理' },
        { value: '3', label: '孙老师' }
      ]
    }
  },
  methods: {
    addExamItem() {
      this.examForm.examItems.push({
        name: '',
        score: 100,
        standard: ''
      })
    },
    removeExamItem(index) {
      this.examForm.examItems.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
        }
      })
    },
    submitAndNext() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
          this.$router.push('/main/renshi/peixun/evaluate')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-exam {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .exam-section {
    margin-bottom: 20px;
  }

  .exam-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .score-unit {
    margin-left: 10px;
    color: #606266;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
  <div class="training-exam">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训考核</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="examForm" :rules="rules" ref="examForm" label-width="120px">
        <el-card class="exam-section">
          <div slot="header">
            <span>考核基本信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="examForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核方式" prop="examType">
                <el-select v-model="examForm.examType" placeholder="请选择考核方式">
                  <el-option label="笔试" value="written"></el-option>
                  <el-option label="实操" value="practical"></el-option>
                  <el-option label="口试" value="oral"></el-option>
                  <el-option label="综合考核" value="comprehensive"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核时间" prop="examTime">
                <el-date-picker
                  v-model="examForm.examTime"
                  type="datetime"
                  placeholder="选择考核时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核地点" prop="examLocation">
                <el-input v-model="examForm.examLocation" placeholder="请输入考核地点"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核人员" prop="examinees">
                <el-select v-model="examForm.examinees" multiple placeholder="请选择考核人员">
                  <el-option
                    v-for="item in employees"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核评分人" prop="examiners">
                <el-select v-model="examForm.examiners" multiple placeholder="请选择考核评分人">
                  <el-option
                    v-for="item in examiners"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="exam-section">
          <div slot="header">
            <span>考核内容设置</span>
          </div>

          <el-form-item label="考核项目" prop="examItems">
            <div v-for="(item, index) in examForm.examItems" :key="index" class="exam-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="考核项目名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input-number v-model="item.score" :min="0" :max="100" placeholder="分值"></el-input-number>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.standard" placeholder="考核标准"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeExamItem(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addExamItem">添加考核项目</el-button>
          </el-form-item>

          <el-form-item label="及格标准" prop="passScore">
            <el-input-number v-model="examForm.passScore" :min="0" :max="100" placeholder="请设置及格分数"></el-input-number>
            <span class="score-unit">分</span>
          </el-form-item>

          <el-form-item label="考核说明" prop="examDescription">
            <el-input type="textarea" v-model="examForm.examDescription" :rows="4" placeholder="请输入考核说明"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button type="success" @click="submitAndNext">保存并进入下一步</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingExam',
  data() {
    return {
      examForm: {
        trainingProject: '',
        examType: '',
        examTime: '',
        examLocation: '',
        examinees: [],
        examiners: [],
        examItems: [
          {
            name: '',
            score: 100,
            standard: ''
          }
        ],
        passScore: 60,
        examDescription: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        examType: [{ required: true, message: '请选择考核方式', trigger: 'change' }],
        examTime: [{ required: true, message: '请选择考核时间', trigger: 'change' }],
        examLocation: [{ required: true, message: '请输入考核地点', trigger: 'blur' }],
        examinees: [{ required: true, message: '请选择考核人员', trigger: 'change' }],
        examiners: [{ required: true, message: '请选择考核评分人', trigger: 'change' }],
        passScore: [{ required: true, message: '请设置及格分数', trigger: 'blur' }]
      },
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ],
      employees: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' }
      ],
      examiners: [
        { value: '1', label: '赵主管' },
        { value: '2', label: '钱经理' },
        { value: '3', label: '孙老师' }
      ]
    }
  },
  methods: {
    addExamItem() {
      this.examForm.examItems.push({
        name: '',
        score: 100,
        standard: ''
      })
    },
    removeExamItem(index) {
      this.examForm.examItems.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
        }
      })
    },
    submitAndNext() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
          this.$router.push('/main/renshi/peixun/evaluate')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-exam {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .exam-section {
    margin-bottom: 20px;
  }

  .exam-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .score-unit {
    margin-left: 10px;
    color: #606266;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
 
 
 
 
  <div class="training-exam">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训考核</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="examForm" :rules="rules" ref="examForm" label-width="120px">
        <el-card class="exam-section">
          <div slot="header">
            <span>考核基本信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="examForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核方式" prop="examType">
                <el-select v-model="examForm.examType" placeholder="请选择考核方式">
                  <el-option label="笔试" value="written"></el-option>
                  <el-option label="实操" value="practical"></el-option>
                  <el-option label="口试" value="oral"></el-option>
                  <el-option label="综合考核" value="comprehensive"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核时间" prop="examTime">
                <el-date-picker
                  v-model="examForm.examTime"
                  type="datetime"
                  placeholder="选择考核时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核地点" prop="examLocation">
                <el-input v-model="examForm.examLocation" placeholder="请输入考核地点"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核人员" prop="examinees">
                <el-select v-model="examForm.examinees" multiple placeholder="请选择考核人员">
                  <el-option
                    v-for="item in employees"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核评分人" prop="examiners">
                <el-select v-model="examForm.examiners" multiple placeholder="请选择考核评分人">
                  <el-option
                    v-for="item in examiners"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="exam-section">
          <div slot="header">
            <span>考核内容设置</span>
          </div>

          <el-form-item label="考核项目" prop="examItems">
            <div v-for="(item, index) in examForm.examItems" :key="index" class="exam-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="考核项目名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input-number v-model="item.score" :min="0" :max="100" placeholder="分值"></el-input-number>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.standard" placeholder="考核标准"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeExamItem(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addExamItem">添加考核项目</el-button>
          </el-form-item>

          <el-form-item label="及格标准" prop="passScore">
            <el-input-number v-model="examForm.passScore" :min="0" :max="100" placeholder="请设置及格分数"></el-input-number>
            <span class="score-unit">分</span>
          </el-form-item>

          <el-form-item label="考核说明" prop="examDescription">
            <el-input type="textarea" v-model="examForm.examDescription" :rows="4" placeholder="请输入考核说明"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button type="success" @click="submitAndNext">保存并进入下一步</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingExam',
  data() {
    return {
      examForm: {
        trainingProject: '',
        examType: '',
        examTime: '',
        examLocation: '',
        examinees: [],
        examiners: [],
        examItems: [
          {
            name: '',
            score: 100,
            standard: ''
          }
        ],
        passScore: 60,
        examDescription: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        examType: [{ required: true, message: '请选择考核方式', trigger: 'change' }],
        examTime: [{ required: true, message: '请选择考核时间', trigger: 'change' }],
        examLocation: [{ required: true, message: '请输入考核地点', trigger: 'blur' }],
        examinees: [{ required: true, message: '请选择考核人员', trigger: 'change' }],
        examiners: [{ required: true, message: '请选择考核评分人', trigger: 'change' }],
        passScore: [{ required: true, message: '请设置及格分数', trigger: 'blur' }]
      },
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ],
      employees: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' }
      ],
      examiners: [
        { value: '1', label: '赵主管' },
        { value: '2', label: '钱经理' },
        { value: '3', label: '孙老师' }
      ]
    }
  },
  methods: {
    addExamItem() {
      this.examForm.examItems.push({
        name: '',
        score: 100,
        standard: ''
      })
    },
    removeExamItem(index) {
      this.examForm.examItems.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
        }
      })
    },
    submitAndNext() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
          this.$router.push('/main/renshi/peixun/evaluate')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-exam {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .exam-section {
    margin-bottom: 20px;
  }

  .exam-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .score-unit {
    margin-left: 10px;
    color: #606266;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
  <div class="training-exam">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/peixun/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">培训考核</h2>
      </div>
    </div>

    <div class="content">
      <el-form :model="examForm" :rules="rules" ref="examForm" label-width="120px">
        <el-card class="exam-section">
          <div slot="header">
            <span>考核基本信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="培训项目" prop="trainingProject">
                <el-select v-model="examForm.trainingProject" placeholder="请选择培训项目">
                  <el-option
                    v-for="item in trainingProjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核方式" prop="examType">
                <el-select v-model="examForm.examType" placeholder="请选择考核方式">
                  <el-option label="笔试" value="written"></el-option>
                  <el-option label="实操" value="practical"></el-option>
                  <el-option label="口试" value="oral"></el-option>
                  <el-option label="综合考核" value="comprehensive"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核时间" prop="examTime">
                <el-date-picker
                  v-model="examForm.examTime"
                  type="datetime"
                  placeholder="选择考核时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核地点" prop="examLocation">
                <el-input v-model="examForm.examLocation" placeholder="请输入考核地点"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核人员" prop="examinees">
                <el-select v-model="examForm.examinees" multiple placeholder="请选择考核人员">
                  <el-option
                    v-for="item in employees"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核评分人" prop="examiners">
                <el-select v-model="examForm.examiners" multiple placeholder="请选择考核评分人">
                  <el-option
                    v-for="item in examiners"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="exam-section">
          <div slot="header">
            <span>考核内容设置</span>
          </div>

          <el-form-item label="考核项目" prop="examItems">
            <div v-for="(item, index) in examForm.examItems" :key="index" class="exam-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.name" placeholder="考核项目名称"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input-number v-model="item.score" :min="0" :max="100" placeholder="分值"></el-input-number>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.standard" placeholder="考核标准"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeExamItem(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addExamItem">添加考核项目</el-button>
          </el-form-item>

          <el-form-item label="及格标准" prop="passScore">
            <el-input-number v-model="examForm.passScore" :min="0" :max="100" placeholder="请设置及格分数"></el-input-number>
            <span class="score-unit">分</span>
          </el-form-item>

          <el-form-item label="考核说明" prop="examDescription">
            <el-input type="textarea" v-model="examForm.examDescription" :rows="4" placeholder="请输入考核说明"></el-input>
          </el-form-item>
        </el-card>

        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button type="success" @click="submitAndNext">保存并进入下一步</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingExam',
  data() {
    return {
      examForm: {
        trainingProject: '',
        examType: '',
        examTime: '',
        examLocation: '',
        examinees: [],
        examiners: [],
        examItems: [
          {
            name: '',
            score: 100,
            standard: ''
          }
        ],
        passScore: 60,
        examDescription: ''
      },
      rules: {
        trainingProject: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
        examType: [{ required: true, message: '请选择考核方式', trigger: 'change' }],
        examTime: [{ required: true, message: '请选择考核时间', trigger: 'change' }],
        examLocation: [{ required: true, message: '请输入考核地点', trigger: 'blur' }],
        examinees: [{ required: true, message: '请选择考核人员', trigger: 'change' }],
        examiners: [{ required: true, message: '请选择考核评分人', trigger: 'change' }],
        passScore: [{ required: true, message: '请设置及格分数', trigger: 'blur' }]
      },
      trainingProjects: [
        { value: '1', label: '新员工入职培训' },
        { value: '2', label: '安全生产培训' },
        { value: '3', label: '专业技能培训' }
      ],
      employees: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' }
      ],
      examiners: [
        { value: '1', label: '赵主管' },
        { value: '2', label: '钱经理' },
        { value: '3', label: '孙老师' }
      ]
    }
  },
  methods: {
    addExamItem() {
      this.examForm.examItems.push({
        name: '',
        score: 100,
        standard: ''
      })
    },
    removeExamItem(index) {
      this.examForm.examItems.splice(index, 1)
    },
    cancel() {
      this.$router.push('/main/renshi/peixun/process')
    },
    submitForm() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
        }
      })
    },
    submitAndNext() {
      this.$refs.examForm.validate(valid => {
        if (valid) {
          // TODO: 保存考核信息
          this.$message.success('考核信息保存成功')
          this.$router.push('/main/renshi/peixun/evaluate')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.training-exam {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .exam-section {
    margin-bottom: 20px;
  }

  .exam-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
  }

  .score-unit {
    margin-left: 10px;
    color: #606266;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}
</style> 
 
 
 
 